<!--
@description: 下拉滚动样式
@author: ldb
@time: 2022-11-04 09:32:30
-->
<template>
  <div class="circle-scroll">
    <slot>
      <div v-for="i of 5" class="card">default scroll style</div>
    </slot>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import { debounce } from '@/utils/debounce-util'
// 是否开启提示
const tip = false
// 防重
const recordSet = new WeakSet<object>()
onMounted(() => {
  // 给滚动添加防抖
  window.onscroll = debounce((e: Event) => {
    if (tip) {
      console.info('水平滚动距离:' + window.scrollY)
      console.info('垂直滚动距离:' + window.scrollX)
      console.info('页面可视宽度:' + window.innerWidth)
      console.info('页面可视高度:' + window.innerHeight)
      // 垂直滚动距离 + 页面宽度 = 滚动宽度
      console.info('页面总宽度:' + document.body.scrollWidth)
      // 水平滚动距离 + 页面高度 = 滚动高度
      console.info('页面总高度:' + document.body.scrollHeight)
      // 移动位置
      // window.scrollTo(0, 0)
    }
    // todo 拿到所有dom 监听判断是否在可视区域类，如果在则执行动画
    let parent = document.getElementsByClassName('circle-scroll')[0]
    if (parent) {
      parent.childNodes.forEach((value: any, key) => {
        if (value) {
          const {
            clientHeight,
            clientWidth,
            offsetHeight,
            offsetLeft,
            offsetTop,
            offsetWidth,
            scrollHeight,
            scrollWidth,
          } = value as any
          // 如果该元素在可视区域类，则开启动画
          if (offsetTop) {
            const isStartAnimation = offsetTop - window.scrollY <= window.innerHeight
            // 只执行一次
            if (recordSet.has(value)) {
              return
            }
            // 符合条件才会添加
            if (isStartAnimation) {
              recordSet.add(value)
            }
            value.style = `top: ${isStartAnimation ? '-35px' : '35px'};`
          }
        }
      })
    }
  }, 0)

  // window.addEventListener('mousewheel', onMouseWheel)
  // window.addEventListener('DOMMouseScroll', onMouseWheel)
})
/*当鼠标滚轮事件发生时，执行一些操作*/
function onMouseWheel(e: any) {
  let ev = e || window.event
  let down = true
  down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0
  if (down) {
    console.log('鼠标滚轮向下---------')
  } else {
    console.log('鼠标滚轮向上++++++++++')
  }
  if (ev.preventDefault) {
    /*FF 和 Chrome*/
    ev.preventDefault() // 阻止默认事件
  }
  return false
}
</script>

<style scoped lang="scss">
@import '@/assets/scss/mixin.scss';
.circle-scroll {
  .card {
    text-align: center;
    color: white;
    font-size: 20px;
    position: relative;
    transition: all 1s linear 0s;
    // 名称 持续时间 开始时间 播放规则 反转播放 播放状态 动画结束状态
    //animation: defaultAnimation 1s ease-in-out 0s infinite alternate running
    @include widthMixer(400px, 400px);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.16);
    background: lightgray;
    border-radius: 15px;
    margin: 50px;
  }
}

@keyframes defaultAnimation {
  // from | to
  0% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(0px);
  }
}
</style>
